<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t('menu.M_0') }}
    </PageTitle>
    <div class="flex gap-6">
      <!-- welcome -->
      <div class="dashboardCard" style="background-color: #003a8c; color: white">
        <div class="leftCard">
          <p class="topContent" style="color: white">
            {{ $t('modules.home.welcome_back') }}
          </p>
          <p class="bottomContent" style="color: white">
            {{ $t('login.operator') }}
          </p>
        </div>
        <div class="img"></div>
      </div>
      <div class="dashboardCard">
        <div class="leftCard">
          <p class="topContent">
            {{ $t('modules.pass.member') }}
          </p>
          <p class="bottomContent">{{ memberNum }}</p>
        </div>
        <div class="img"></div>
      </div>
      <div class="dashboardCard">
        <div class="leftCard">
          <p class="topContent">
            {{ $t('modules.data_center.merchant_analyze.merchants_number') }}
          </p>
          <p class="bottomContent">{{ merchantNum }}</p>
        </div>
        <div class="img"></div>
      </div>
      <!-- Merchants -->
      <!-- <div
        v-if="item.label == 'MERCHANTS'"
        class="fty-data-card fty-card drag-card"
        label="MERCHANTS"
      >
        <div class="flex items-center justify-between">
          <div class="flex flex-col justify-center">
            <p class="text-secondary">{{ $t('modules.home.merchants') }}</p>
            <p class="font-bold">
              {{ merchantNum }}
            </p>
          </div>
          <div @click="merchantClickHandle" style="cursor: pointer" class="box-icon">
            <i class="el-icon-goods" />
          </div>
        </div>
      </div> -->

      <!-- TERMINALS -->
      <!-- <div
        v-if="item.label == 'TERMINALS'"
        class="fty-data-card fty-card drag-card"
        label="TERMINALS"
      >
        <div class="flex items-center justify-between">
          <div class="flex flex-col justify-center">
            <p class="text-secondary">{{ $t('modules.home.terminals') }}</p>
            <p class="font-bold">
              {{ terminalNum }}
            </p>
          </div>
          <div style="cursor: pointer" @click="terminalClickHandle" class="box-icon">
            <i class="el-icon-mobile-phone" />
          </div>
        </div>
      </div> -->
    </div>
    <lineChart/>
  </div>
</template>

<script>
import { isAuth } from '@/utils'
import { timeFilter, dateFilter } from '@/filters/index'
import PageTitle from '@/components/PageTitle/index.vue'
import lineChart from './commonents/lineChart.vue'
import { getMember, getMemberPass } from '@/api/pass-center'
import { getMrchNum } from '@/api/merchant'
export default {
  components: {
    PageTitle,
    lineChart
  },
  data() {
    return {
      memberNum: '',
      merchantNum: ''
    }
  },
  mounted() {
    this.getMemberNum()
    this.getMerchantNum()
    
  },
  methods: {
    timeFilter,
    dateFilter,
    isAuth,
    getMemberNum() {
      getMember()
        .then((res) => {
          this.memberNum = res
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    getMerchantNum() {
      getMrchNum()
        .then((res) => {
          this.merchantNum = res
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    getMemberLineChart() {
      let params = {
        range: 7,
        unit: 1
      }
      getMemberPass(params)
        .then((res) => {
          console.log('ressss', res)
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    }
  }
}
</script>
<style lang="scss" scope>
.dashboardCard {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;
  background-color: white;
}
.leftCard {
  width: 70%;
  padding-left: 32px;
}
.topContent {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #8e95a9;
}
.bottomContent {
  font-size: 24px;
  font-weight: 600;
  line-height: 40px;
  color: #1c2a53;
}
.img {
  width: 100%;
  height: 120px;
  background-image: url('@/assets/images/dashboard/welcome-back-user.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
}
</style>
